<template>
  <div class="goods" style="margin-top: 20px">
    <a href="/" class="more">查看更多 ></a>
    <div class="goods-title">{{ props.title }}</div>
    <p class="descript">{{ props.descript }}</p>
    <ul class="goods-list">
      <li class="goods-item" v-for="item in 5" :key="item">
        <a href="/">
          <img src="../../../images/all-item.png" alt="" />
          <p class="name">阿斯顿发送到奉公守法的鬼地方</p>
          <p class="desc">品质优选</p>
          <p class="price">18.89</p>
        </a>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  descript: {
    type: String,
    default: '',
  },
});
</script>
<style scoped lang="less">
.goods {
  background-color: #fff;
  text-align: center;
}
.goods-title {
  font-size: 28px;
  color: #666;
  padding-top: 40px;
  padding-bottom: 10px;
  font-weight: 400;
  margin-left: 90px;
}
.descript {
  font-size: 20px;
  color: #999;
  padding-bottom: 40px;
}
.goods-list {
  display: flex;
  justify-content: space-between;
  padding: 0 25px;
  .goods-item {
    width: 222px;
    height: 320px;
    padding: 0 10px;
    margin-top: 20px;
    img {
      width: 160px;
      height: 160px;
      transition: all 0.5s;
      &:hover {
        transform: scale(1.05);
      }
    }
    .name {
      font-size: 16px;
      padding: 12px 20px 0;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .desc {
      color: #999;
      padding: 12px 20px 0;
    }
    .price {
      color: #cf4444;
      font-size: 18px;
      padding-top: 24px;
      padding: 12px 20px 0;
    }
  }
}
.more {
  float: right;
  margin-top: 20px;
  margin-right: 20px;
  color: #999;
  font-size: 16px;
  &:hover {
    color: aquamarine;
  }
}
</style>
